<template>
  <section class="customForm">
    <a-form-model
      ref="formRef"
      :model="form"
      :rules="formConfig.rules?formConfig.rules:rules"
      :label-col="useCol('labelCol', formConfig.labelCol)"
      :wrapper-col="useCol('wrapperCol', formConfig.wrapperCol)"
    >
      <a-row type="flex" justify="space-between">
        <template v-for="(item, index) in formConfig.formItemList">
          <template v-if="item.type === 'input'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <Input
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :labelCol="useItemCol('labelCol', item)"
                :wrapperCol="useItemCol('wrapperCol', item)"
                :placeholder="item.placeholder"
                v-if="!item.hide"
              ></Input>
            </a-col>
          </template>
          <template v-else-if="item.type === 'inputNum'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <InputNumber
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :min="item.min"
                :max="item.max"
                :labelCol="useItemCol('labelCol', item)"
                :wrapperCol="useItemCol('wrapperCol', item)"
                :placeholder="item.placeholder"
              ></InputNumber>
            </a-col>
          </template>
          <template v-else-if="item.type === 'select'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <Select
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :optList="item.optList"
                :labelCol="useItemCol('labelCol', item)"
                :wrapperCol="useItemCol('wrapperCol', item)"
                :placeholder="item.placeholder"
                @change="e => fnLinkage(e, item)"
              ></Select>
            </a-col>
          </template>
          <template v-else-if="item.type === 'selectTree'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <treeSelect
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :treeData="item.optList"
                :labelCol="useItemCol('labelCol', item)"
                :wrapperCol="useItemCol('wrapperCol', item)"
                :placeholder="item.placeholder"
              ></treeSelect>
            </a-col>
          </template>
          <template v-else-if="item.type === 'datePicker'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <datePicker
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :placeholder="item.placeholder"
                readonly
              ></datePicker>
            </a-col>
          </template>
          <template v-else-if="item.type === 'rangeDatePicker'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <rangeDatePicker
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :labelCol="useItemCol('labelCol', item)"
                :wrapperCol="useItemCol('wrapperCol', item)"
                :placeholder="item.placeholder"
              ></rangeDatePicker>
            </a-col>
          </template>
          <template v-else-if="item.type === 'timePicker'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <timePicker
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :labelCol="useItemCol('labelCol', item)"
                :wrapperCol="useItemCol('wrapperCol', item)"
                :placeholder="item.placeholder"
              ></timePicker>
            </a-col>
          </template>
          <template v-else-if="item.type === 'rangeTimePicker'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <rangeTimePicker
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :labelCol="useItemCol('labelCol', item)"
                :wrapperCol="useItemCol('wrapperCol', item)"
                :placeholder="item.placeholder"
                readonly
              ></rangeTimePicker>
            </a-col>
          </template>
          <template v-else-if="item.type === 'faultSelect'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <faultMultipleSelection
                :form="form"
                :prop="item.prop"
                :label="item.label"
                :labelCol="useItemCol('labelCol', item)"
                :wrapperCol="useItemCol('wrapperCol', item)"
                :placeholder="item.placeholder"
              ></faultMultipleSelection>
            </a-col>
          </template>
          <template v-else-if="item.type === 'slot'">
            <a-col
              :span="useCol('span', item.span)"
              :key="index"
            >
              <template v-if="item.prop">
                <slot :name="item.slot" :form="form" :val="form[item.prop]">
                  插槽 {{ item.slot }}： 无数据
                </slot >
              </template>
              <template v-else>
                <slot :name="item.slot" :form="form">
                  插槽 {{ item.slot }}： 无数据
                </slot >
              </template>
            </a-col>
          </template>
        </template>
      </a-row>
      <a-row type="flex" justify="space-between">
        <a-col :span="24" style="display:flex;justify-content: flex-end;border-top: 1px solid #e8e8e8;padding: 10px 0;">
          <Button type="reset" label="关闭"></Button>
          <Button type="search" label="确定" style="margin-left: 20px;" @click="onSubmit"></Button>
        </a-col>
      </a-row>
    </a-form-model>
  </section>
</template>

<script>
import Input from '@/components/typicalControl/Input';
import InputNumber from '@/components/typicalControl/InputNumber';
import Select from '@/components/typicalControl/select';
import treeSelect from '@/components/typicalControl/treeSelect';
import datePicker from '@/components/typicalControl/datePicker';
import rangeDatePicker from '@/components/typicalControl/rangeDatePicker';
import timePicker from '@/components/typicalControl/timePicker';
import rangeTimePicker from '@/components/typicalControl/rangeTimePicker';
import Button from '@/components/typicalControl/button';
import faultMultipleSelection from '@/components/typicalControl/faultMultipleSelection';
export default {
  name: 'TypicalSearch',
  components: {
    Input: Input,
    InputNumber: InputNumber,
    Select: Select,
    treeSelect: treeSelect,
    datePicker: datePicker,
    rangeDatePicker: rangeDatePicker,
    timePicker: timePicker,
    rangeTimePicker: rangeTimePicker,
    faultMultipleSelection: faultMultipleSelection,
    Button: Button
  },
  props: {
    formConfig: {
      type: Object,
      default: () => {
        return {
          formItemList: []
        };
      }
    }
  },
  data() {
    return {
      rules: {},
      form: {}
    };
  },
  created() {
    this.Initialization();
  },
  mounted() {
  },
  methods: {
    useOverallSpan() {
      return this.formConfig.span || 6;
    },
    /**
     * [useCol 表单格子默认值]
     * @param  {[type]} attribute [属性]
     * @param  {[type]} val       [值]
     * @return {[type]}           [description]
     */
    useCol(attribute, val) {
      var result = {};
      if (attribute === 'labelCol') {
        result.span = val || 6;
      } else if (attribute === 'wrapperCol') {
        result.span = val || 18;
      } else {
        result = val || this.useOverallSpan();
      }
      return result;
    },
    useItemCol(attribute, item) {
      // 系数2,3,4,6控制默认根据span适配label对齐
      const k = 3;
      var val;
      var result = {};
      if (item[attribute]) {
        val = item[attribute];
        result.span = val;
        return result;
      } else if (item.span) {
        val = item.span / 24 * k;
      };
      if (!val) {
        result = null;
      } else if (attribute === 'labelCol') {
        result.span = Math.round(this.useOverallSpan() / val);
      } else if (attribute === 'wrapperCol') {
        result.span = 24 - Math.round(this.useOverallSpan() / val);
      }
      return result;
    },
    /**
     * [Initialization 初始化组件配置生成双向绑定数据]
     */
    Initialization() {
      const controlData = this.formConfig.formItemList;
      for (var i = 0; i < controlData.length; i++) {
        // this.$set(this.form, controlData[i].prop, controlData[i].value);
        this.generateDeepObjects(controlData[i].prop, controlData[i].value);
      }
      console.log('初始化form', this.form);
    },
    /**
     * [setFormItemVal 设置表单属性值]
     * @param {[type]} prop  [属性]
     * @param {[type]} value [值]
     */
    setFormItemVal(prop, value) {
      this.form[prop] = value;
    },
    /**
     * [onSubmit 表单确定]
     * @return {[type]} [description]
     */
    onSubmit() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          if (this.formConfig.onSubmit) {
            this.formConfig.onSubmit(this.form);
          }
          this.$emit('onSubmit', this.form);
        } else {
          return false;
        }
      });
    },
    /**
     * [fnLinkage 解析动态业务配置]
     * @param  {[type]} e       [组件变动值]
     * @param  {[type]} item    [单个表格配置]
     * @return {[type]}         [description]
     */
    fnLinkage(e, item) {
      if (item.linkage) {
        if (item.linkage.isDynamic) {
          // 处理动态表格
          if (this.formConfig.onDynamic) {
            this.formConfig.onDynamic(item.prop, this.form[item.prop]);
          }
          if (this.formConfig.aProp) {}
          if (this.formConfig.aList) {}
        }
      }
    },
    /**
     * [generateDeepObjects 生成对象深层属性]
     * @param  {[type]} prop   [深层属性]
     * @param  {[type]} val    [末级对象的具体属性赋值val（空值输出末级对象）]
     * @return {[type]}        [description]
     */
    generateDeepObjects(prop, val) {
      var object = this.form;
      var arr = prop.split('.');
      let index = 0;
      const length = arr.length;
      while (index < length - 1) {
        if (!object[arr[index]]) {
          this.$set(object, arr[index], {});
        }
        object = object[arr[index]];
        index++;
      }
      this.$set(object, arr[index], val);
    }
  },
  destroyed() {
  }
};
</script>

<style>
  .customForm {
    padding: 10px 10px 0 0;
    background: #fff;
    margin-bottom: 10px;
    border-radius: 5px;
  }
</style>
